<template>
  <div class="consumer-record-container">
    <!-- 顶部导航栏 -->
    <el-row class="header">
      <el-col :span="12">
        <img class="title" src="@/assets/image/ytj/ywcx2.png" alt="" srcset="">
      </el-col>
      <el-col :span="12" class="logout-tip">
        {{ remainingTime }}  内无操作，将会退出登录
      </el-col>
    </el-row>

    <!-- 主体内容区 -->
    <div class="main-content">
      <!-- 消费记录查询标题栏 -->
      <div class="query-header">
        <div class="query-title">
          <img class="query-icon" src="@/assets/image/ytj/jl.png" alt="" srcset="">
          <span style="font-size: 20px;">消费记录查询</span>
        </div>
        <!-- <el-select
          v-model="selectedYear"
          placeholder="选择年份"
          class="year-select"
        >
          <el-option
            v-for="year in years"
            :key="year"
            :label="year + '年'"
            :value="year"
          />
        </el-select> -->
      </div>

      <!-- 年度汇总卡片 -->
      <el-card class="summary-card">
        <div slot="header" class="clearfix">
          <img class="header-icon" src="@/assets/image/ytj/shuxian.png" alt="" srcset="">
          <span style="color: #2A4896; font-size: 20px;">年度汇总（共计消费{{ OBJ1.count ? OBJ1.count : '--' }}笔）</span>
        </div>

        <el-row :gutter="20">
          <el-col :span="24">
            <div class="feiyong-main">
              <el-row :gutter="20">
                <el-col :span="4">
                  <div class="feiyong-icon-m">
                    <img class="feiyong-icon" src="@/assets/image/ytj/nd.png" alt="" srcset="">
                  </div>
                </el-col>
                <el-col :span="12">
                  <span class="feiyong-text">年度费用总额</span>
                </el-col>
                <el-col :span="8">
                  <div style="text-align: right;margin-right: 20px;">
                    <span class="stat-value">{{ OBJ1.medfeeSumamtAll!=='' ? OBJ1.medfeeSumamtAll : '--' }} <span style="color: #303133;font-weight: 400; font-size: 18px;">元</span></span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="feiyong-main">
              <el-row :gutter="20">
                <el-col :span="4">
                  <div class="feiyong-icon-m">
                    <img class="feiyong-icon" src="@/assets/image/ytj/yb.png" alt="" srcset="">
                  </div>
                </el-col>
                <el-col :span="12">
                  <span class="feiyong-text">医保支付总额</span>
                </el-col>
                <el-col :span="8">
                  <div style="text-align: right;margin-right: 20px;">
                    <span class="stat-value">{{ OBJ1.fundPaySumamtAll!=='' ? OBJ1.fundPaySumamtAll : '--' }} <span style="color: #303133;font-weight: 400; font-size: 18px;">元</span></span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="feiyong-main">
              <el-row :gutter="20">
                <el-col :span="4">
                  <div class="feiyong-icon-m">
                    <img class="feiyong-icon" src="@/assets/image/ytj/gr.png" alt="" srcset="">
                  </div>
                </el-col>
                <el-col :span="12">
                  <span class="feiyong-text">个人支付金额</span>
                </el-col>
                <el-col :span="8">
                  <div style="text-align: right;margin-right: 20px;">
                    <span class="stat-value">{{ OBJ1.psnPayAll!=='' ? OBJ1.psnPayAll : '--' }} <span style="color: #303133;font-weight: 400; font-size: 18px;">元</span></span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="feiyong-main">
              <el-row :gutter="20">
                <el-col :span="4">
                  <div class="feiyong-icon-m">
                    <img class="feiyong-icon" src="@/assets/image/ytj/gj.png" alt="" srcset="">
                  </div>
                </el-col>
                <el-col :span="12">
                  <span class="feiyong-text">共济支付金额</span>
                </el-col>
                <el-col :span="8">
                  <div style="text-align: right;margin-right: 20px;">
                    <span class="stat-value">{{ OBJ1.acctMulaidPayAll!=='' ? OBJ1.acctMulaidPayAll : '--' }} <span style="color: #303133;font-weight: 400; font-size: 18px;">元</span></span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <!-- 消费类型占比 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="type-item hospital">
              <span class="type-name">住院</span>
              <span class="type-percent">{{ OBJ1.hospPercent ? OBJ1.hospPercent*100+'%' : '--' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="type-item clinic">
              <span class="type-name">门诊</span>
              <span class="type-percent">{{ OBJ1.outpatientPercent ? OBJ1.outpatientPercent*100+'%' : '--' }}</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="type-item pharmacy">
              <span class="type-name">药店</span>
              <span class="type-percent">{{ OBJ1.pharmacyPercent ? OBJ1.pharmacyPercent*100+'%' : '--' }}</span>
            </div>
          </el-col>
        </el-row>
        <div v-infinite-scroll="load" class="hospital-main1">
          <div v-for="(i,k) in List2" :key="k" class="hospital-main">
            <div class="hospital-name">
              {{ i.fixmedinsName }}
            </div>
            <div class="visit-type">
              <!-- <el-tag type="primary" class="ptmz">{{ i.medType }}</el-tag> -->
              <span class="visit-date">{{ i.setlTime }}</span>
            </div>
            <el-divider />
            <div class="expense-details">
              <div class="expense-item">
                <span class="expense-label">总费用</span>
                <span class="expense-value">{{ i.fundPaySumamt!=='' ? i.fundPaySumamt : '--' }}元</span>

              </div>
              <div class="expense-item">
                <span class="expense-label">现金支付</span>
                <span class="expense-value">{{ i.cashPayamt!=='' ? i.cashPayamt : '--' }}元</span>

              </div>
              <div class="expense-item">
                <span class="expense-label">基金支付</span>
                <span class="expense-value">{{ i.hifpPay!=='' ? i.hifpPay : '--' }}元</span>

              </div>
              <div class="expense-item">
                <span class="expense-label">个账支付</span>
                <span class="expense-value">{{ i.psnPay!=='' ? i.psnPay : '--' }}元</span>

              </div>
              <!-- <div class="expense-item">
                <span class="expense-label">支付地点类别</span>
                <span class="expense-value">{{ i.payLoc!=='' ? i.payLoc : '--' }}</span>
              </div> -->
            </div>
            <el-divider />
            <el-row>
              <div class="operation-buttons">
                <el-col :span="12">
                  <el-button type="primary" plain class="detail-btn" @click.native="handleCardClick('consumptionList', i.setlId)">费用清单</el-button>

                </el-col>
                <el-col :span="12">
                  <el-button type="primary" plain class="detail-btn" @click.native="handleCardClick2('settlementDetails', i)">结算明细</el-button>
                </el-col>
              </div>
            </el-row>
          </div>
        </div>
      </el-card>

    </div>
  </div>
</template>

<script>
import { querySetlInfo, querySetlInfoChart, getPsnBasInfoByToken, queryDataFrontUse } from '@/api/ytj.js'
export default {
  data() {
    return {
      remainingTime: 120, // 初始倒计时时间（120秒）
      countdownTimer: null, // 计时器实例
      // 当前选中的年份
      selectedYear: 2025,
      // 可选择的年份列表
      years: [2025, 2024, 2023, 2022, 2021],
      psnNo: '',
      // 参数
      OBJ3: { 'psnNo': '', 'begndate': '2020-01-01 00:00:00', 'enddate': '2025-12-31 23:59:59', 'isAllYear': true, 'valiFlag': '1', 'medType': '', 'poolareaNo': '' },
      OBJ: { pageNum: 1, pageSize: 10, psnNo: '', begndate: '2020-01-01 00:00:00', enddate: '2025-12-31 23:59:59', isAllYear: true, valiFlag: '1', medType: '', poolareaNo: '' },
      // 赋值
      OBJ1: {},
      List2: []
    }
  },
  mounted() {
    this.getPsnBasInfoByToken()
    // 初始化倒计时
    this.startCountdown()
    // 监听全局操作（点击/按键）重置倒计时
    window.addEventListener('click', this.resetCountdown)
    window.addEventListener('keydown', this.resetCountdown)
  },
  beforeDestroy() {
    // 组件销毁时清理计时器和事件监听
    this.clearCountdown()
    window.removeEventListener('click', this.resetCountdown)
    window.removeEventListener('keydown', this.resetCountdown)
  },
  methods: {
    load() {
      console.log(123123123123)
      this.OBJ.pageNum += 1
      querySetlInfo(this.OBJ)
        .then((res) => {
          console.log('消费列表查询：', res)
          this.List2 = res.data.data || []
        })
        .finally(() => {
          this.$nextTick(() => {
            this.loading = false
          })
        })
    },
    // 可以添加年份切换等事件处理方法
    handleYearChange(year) {
      console.log('选择的年份:', year)
      // 可以在这里添加年份变更后的逻辑，如重新加载数据
    },
    getPsnBasInfoByToken() {
      getPsnBasInfoByToken().then((res) => {
        this.psnNo = res.data.psnBasInfoDTO.psnNo
        this.OBJ3.psnNo = res.data.psnBasInfoDTO.psnNo
        this.OBJ.psnNo = res.data.psnBasInfoDTO.psnNo
        this.querySetlInfo()
        this.querySetlInfoChart()
      }).finally(() => {
        this.$nextTick(() => {
          this.loading = false
        })
      })
    },
    handleCardClick(functionName, k) {
      this.$router.push({
        name: functionName,
        params: {
          setlId: k,
          psnNo: this.psnNo
        }
      })
    },
    handleCardClick2(functionName, e) {
      this.$router.push({
        name: functionName,
        params: e
      })
    },
    // 查询接口-zong
    querySetlInfoChart() {
      querySetlInfoChart(this.OBJ3)
        .then((res) => {
          console.log('消费列表查询-zong：', res)
          this.OBJ1 = res.data
        })
        .finally(() => {
          this.$nextTick(() => {
            this.loading = false
          })
        })
    },
    // 查询接口
    querySetlInfo() {
      querySetlInfo(this.OBJ)
        .then((res) => {
          console.log('消费列表查询：', res)
          // 1. 获取原始数据
          this.List2 = res.data.data || []

          // // 2. 提取所有type并去重（避免重复请求）
          // const typeList = [...new Set(this.List2.map(item => item.medType || ''))].filter(Boolean)
          // if (typeList.length === 0) return // 没有type则无需调用接口

          // // 3. 调用转换接口，传入type列表
          // queryDataFrontUse({ types: typeList }) // 假设接口参数为{ types: [] }
          //   .then(typeRes => {

          //     console.log('=====标签：=====', JSON.stringify(typeRes))

          //   // 4. 构建type到汉字的映射表（code为type值，name为汉字）
          //     const typeMap = {};
          //     (typeRes.data || []).forEach(item => {
          //       typeMap[item.code] = item.name // 例如：{ '01': '门诊', '02': '住院' }
          //     })

          //     // 5. 更新List2中的type为汉字
          //     this.List2 = this.List2.map(item => ({
          //       ...item,
          //       type: typeMap[item.medType] || item.medType // 若没有对应汉字则保留原type
          //     }))
          //   })
          //   .catch(err => {
          //     console.error('获取type中文名称失败：', err)
          //   })
        })
        .finally(() => {
          this.$nextTick(() => {
            this.loading = false
          })
        })
    },
    // 倒计时方法
    // 启动倒计时
    startCountdown() {
      // 先清除已有计时器，避免重复计时
      this.clearCountdown()

      this.countdownTimer = setInterval(() => {
        this.remainingTime--

        // 倒计时结束：弹出提示
        if (this.remainingTime <= 0) {
          this.clearCountdown()
          this.showTimeoutAlert()
        }
      }, 1000) // 每秒执行一次
    },

    // 清除计时器
    clearCountdown() {
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
        this.countdownTimer = null
      }
    },

    // 重置倒计时（用户有操作时）
    resetCountdown() {
      // 只有倒计时未结束时才重置
      if (this.remainingTime > 0) {
        this.remainingTime = 120
        this.startCountdown() // 重新启动计时
      }
    },

    // 显示超时提示弹窗
    showTimeoutAlert() {
      this.$router.push({ name: 'screenMain' })
    }
  }
}
</script>

<style scoped>
.consumer-record-container {
  width: 100%;
  height: 90%;
}

/* 顶部导航样式 */
.header {
  width: 100%;
  padding: 20px 20px;
  border-radius: 4px;
  box-sizing: border-box;
}
.header-icon{
  width: 5px;
  height: 17px;
  margin-right: 10px;
}
.title {
  width: 87px;
  height: 20px;
}

.logout-tip {
  text-align: right;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
}

/* 主体内容样式 */
.main-content {
  background-image: url('../../../../assets/image/ytj/juxing.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}

/* 查询标题栏样式 */
.query-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.query-title {
  display: flex;
  align-items: center;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 44px;
}
.query-icon{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.query-title i {
  margin-right: 8px;
  font-size: 20px;
}

.year-select {
  width: 120px;
}

/* 汇总卡片样式 */
.summary-card {
  margin-bottom: 20px;
  border-radius: 20px;
}
.el-card /deep/.el-card__header {
  background: #DBE3F6;
}
.feiyong-main{
  width: 100%;
  height: 45px;
  background: #EBEFF6;
  border-radius: 30px;
  line-height: 45px;
  margin-bottom: 10px;
}
.feiyong-icon-m{
  padding-top: 8px;
  margin-left: 10px;
}
.feiyong-icon{
  width: 30px;
  height: 30px;
}
.feiyong-text{
  margin-left: -20px;
  font-weight: 400;
  font-size: 18px;
  color: #303133;
}
.stat-value{
  font-weight: bold;
  font-size: 20px;
  color: #1B65B9;
}
.summary-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  color: #303133;
  font-weight: 500;

  margin-top: 0;
  background: #DBE3F6;
  border-radius: 40px;
}

/* 消费类型占比样式 */
.consumption-types {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.type-item {
  flex: 1;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  color: #303133;
  font-weight: 500;
}

.type-name {
  margin-right: 5px;
}

.hospital {
  height: 50px;
  background-image: url('../../../../assets/image/ytj/zy.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 30px;
}

.clinic {
  height: 50px;
  background-image: url('../../../../assets/image/ytj/mz.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 30px;
}

.pharmacy {
  height: 50px;
  background-image: url('../../../../assets/image/ytj/yd.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  line-height: 30px;
}
.hospital-main1{
  height: 500px;
  overflow-y: auto;
}
.hospital-main{
  margin-top: 20px;
  padding: 20px;
  background: #EBEFF6;
  border-radius: 20px;
}
.hospital-name {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #303133;
}

.visit-type {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e8e8e8;
}
.ptmz{
  width: 80px;
  height: 30px;
  background: #6590F3;
  border-radius: 10px;color: #fff;padding: 0;display: flex;
  justify-content: center;
  align-items: center;
}
.visit-date {
  color: #909399;
  font-size: 14px;
}

.expense-details {
  margin-bottom: 20px;
}

.expense-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
}

.expense-label {
  font-size: 18px;
  color: #909399;
}

.expense-value {
  font-size: 18px;
  color: #1B65B9;
  font-weight: 500;
}

.operation-buttons {
  margin-top: 20px;
  text-align: center;
  .detail-btn {
    height: 60px;
    width: 95%;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .summary-stats {
    flex-direction: column;
  }

  .consumption-types {
    flex-direction: column;
  }
}
</style>
